<template>
  <div class="content" v-if="!loading">
    <div>
      <el-row>
        <el-col :span="6" :offset="6">{{ data.user.nick }}</el-col>
        <el-col :span="6" :offset="4">
          <el-avatar
            shape="square"
            :size="50"
            :src="data.user.head"
          ></el-avatar>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <div class="divider">
            <el-divider />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 好友 -->
    <div v-if="data.friend">
      <el-row>
        <el-col :span="12" :offset="6">
          <div>
            <el-descriptions class="margin-top" :column="1">
              <el-descriptions-item label="备注">
                <div
                  class="fiendMemo"
                  v-if="!friendMemoInput"
                  @click="friendMemoInput = true"
                >
                  {{ data.userFriend.friendMemo }}
                </div>
                <el-input
                  v-else
                  v-model="friendMemo"
                  placeholder="请输入新的备注"
                  size="mini"
                  @blur="blurFriendMemo"
                ></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="增添时间">{{
                data.userFriend.createTime
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <div class="divider">
            <el-divider />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <div style="text-align: center">
            <el-button type="success" @click="sendMessge"> 发送消息 </el-button>
            <el-button type="danger" @click="delFriend"> 删除好友 </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 用户 -->
    <div v-else>
      <el-row>
        <el-col :span="12" :offset="6">
          <div style="text-align: center">
            <el-button type="success" :loading="add.loading" @click="addFriend">
              增添好友
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { UserFriend } from "@/api/api.js";
import moment from "moment";
export default {
  data() {
    return {
      userId: "",
      friendMemoInput: false,
      friendMemo: "",
      add: {
        loading: false,
      },
      loading: true,
      data: {},
    };
  },
  created() {
    this.onLoad(this.$route.query.userId);
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      //刷新参数放到这里里面去触发就可以刷新相同界面了
      this.onLoad(this.$route.query.userId);
    },
  },
  methods: {
    blurFriendMemo() {
      this.friendMemoInput = false;
      console.log(this.friendMemo);
    },
    delFriend() {
      this.$confirm("此操作将删除该好友，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        UserFriend.del(this.userId).then((res) => {
          this.$store.commit("removeSession", res);
          this.$router.push({
            name: "Friend",
            query: {
              t: moment(new Date()).valueOf(),
            },
          });
        });
      });
    },
    addFriend() {
      this.add.loading = true;
      UserFriend.add(this.data.user.userId)
        .then((res) => {
          this.add.loading = false;
          this.$router.push({
            path: "chatFrame",
            query: {
              sessionId: res,
            },
          });
        })
        .catch((err) => {
          console.log(err);
          this.add.loading = false;
        });
    },
    sendMessge() {
      this.$router.push({
        path: "chatFrame",
        query: {
          sessionId: this.data.userFriend.sessionId,
        },
      });
    },
    onLoad(userId) {
      this.userId = userId;
      console.log(userId);
      if (userId) {
        UserFriend.getFriend(userId).then((res) => {
          this.data = res;
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style lang="less">
.el-descriptions__body {
  background-color: #f3f4f9;
}
</style>
<style lang="less" scoped>
.content {
  padding: 20px;
  padding-top: 80px;
}
.divider {
  margin: 30px 0;
}
.fiendMemo {
  padding: 2px 0;
  cursor: pointer;
}
.fiendMemo:hover {
  border: 1px outset #fff;
}
</style>